<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">基本信息:</td>
        <td>
          <p style="float: left;">


            停车场编号：<span id="parkCode">
           {{result.parkCode }}
                    </span><br>


            停车场名称：<span id="parkName">
           {{result.parkName }}
                    </span><br>


            月租编号：<span id="monthlyCode">
           {{result.monthlyCode }}
                    </span><br>


            套餐id：<span id="packageId">
           {{result.packageId }}
                    </span><br>


            套餐名称：<span id="packageName">
           {{result.packageName }}
                    </span><br>


            车主姓名：<span id="carOwnerName">
           {{result.carOwnerName }}
                    </span><br>


            部门id：<span id="monthlyDepartmentId">
           {{result.monthlyDepartmentId }}
                    </span><br>


            部门名称：<span id="monthlyDepartmentName">
           {{result.monthlyDepartmentName }}
                    </span><br>


            通行权限id：<span id="throughAuthorityId">
           {{result.throughAuthorityId }}
                    </span><br>


            通行权限名称：<span id="throughAuthorityName">
           {{result.throughAuthorityName }}
                    </span><br>


            住址：<span id="address">
           {{result.address }}
                    </span><br>


            手机号码：<span id="telephone">
           {{result.telephone }}
                    </span><br>


            有效期开始时间：<span id="beginTime">
           {{result.beginTime }}
                    </span><br>
            有效期结束时间：<span id="endTime">
           {{result.endTime }}
                    </span><br>
<!--            月租金额(元)：<span id="monthlyMoney">-->
<!--           {{result.monthlyMoney }}-->
<!--                    </span><br>-->
            备注信息：<span id="remark">
           {{result.remark }}
                    </span><br>
            月租状态：<span id="monthlyStatus">
           {{result.monthlyStatus }}
                    </span><br>
          </p>
        </td>
      </tr>
      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">详情:</td>
        <td>
          <p style="float: left;">
<!--            删除状态（0，正常，1已删除）：<span id="delFlag">-->
<!--           {{result.delFlag }}-->
<!--                    </span><br>-->
            创建人id：<span id="createUserId">
           {{result.createUserId }}
                    </span><br>
            创建人名称：<span id="createUserName">
           {{result.createUserName }}
                    </span><br>
            修改人id：<span id="updateUserId">
           {{result.updateUserId }}
                    </span><br>
            修改人名称：<span id="updateUserName">
           {{result.updateUserName }}
                    </span><br>
            修改时间：<span id="updateTime">
           {{result.updateTime }}
                    </span><br>
            创建时间：<span id="createTime">
           {{result.createTime }}
                    </span><br>
<!--            sortId：<span id="sortId">-->
<!--           {{result.sortId }}-->
<!--                    </span><br>-->

          </p>
        </td>
      </tr>



      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button  @click="close">关闭</a-button>
        </td>
      </tr>
    </table>

  </a-modal>
</template>

<script>
  import {httpAction,getAction} from '@/api/manage'

  export default {
    name: "MonthlyCardInfoModalDetail",
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        result: {},
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          parkCode: {rules: [{required: true, message: '请输入停车场编号!'}]},
          sortId: {rules: [{required: true, message: '请输入sortId!'}]},
        },
        url: {

        },
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({});
      },
      edit(record) {
        Object.assign(this.result, record);
        if(this.result.monthlyStatus===2){
          this.result.monthlyStatus="报停"
        }
        if(this.result.monthlyStatus===3){
          this.result.monthlyStatus="注销"
        }
        if(new Date()>new Date(this.result.endTime)){
          this.result.monthlyStatus="过期"
        }
        if(new Date()<=new Date(this.result.endTime)){
          this.result.monthlyStatus="正常"
        }
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.beginTime = formData.beginTime ? formData.beginTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.endTime = formData.endTime ? formData.endTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;

            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })


          }
        })
      },
      handleCancel() {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>